<template>
  <div class="jigou">
    <colorTitle
      title="中视财华-国内最专业的PPP传播机构"
      desc="与国家财政部PPP中心、发改委达成长期合作关系"
    ></colorTitle>
    <div class="top">
      <div class="top-inner fixed-width flex justify-around">
        <div class="top-item">
          <div class="top-person-title">
            <img src="https://img.cctvch.cn/uploads/f3d9c213477dc6aec6df6055c2dec1ac.png" alt="" />
          </div>
          <p class="top-person font-m">
            <span style="color:#2f4784">财政部政府和社会资本合作中心</span>（PPP中心）主要承担政府和社会资本合作（PPP）
            相关的政策研究、咨询培训、能力建设、融资支持、信息统计和国际交流等工作。
            中心将为进一步推进PPP工作提供必要的技术支撑和组织保障，更好的促进PPP规范健康发展。
          </p>
        </div>
        <div class="top-item">
          <div class="top-person-title">
            <img src="https://img.cctvch.cn/uploads/ed497792196d971b2146998dbf76a334.png" alt="" />
          </div>
          <p class="top-person font-m">
            <span style="color:#2f4784">中华人民共和国国家发展和改革委员会</span>（发改委）是综合研究拟订经济和社会发展政策，进行总量平衡，
            指导总体经济体制改革的宏观调控部门，其职能涵盖固定资产投资、
            产业结构、区域经济发展、国内外市场状况，使经济和社会协调发展，
            推进可持续发展战略，促进就业，调整收入分配，制定相应的行政法规和规章等。
          </p>
        </div>
      </div>
    </div>
    <div class="bottom fixed-width flex justify-between">
      <div class="bottom-img-wrap">
        <div class="bottom-img">
          <PlayVue :src="state.info.content_url" :cover="state.info.cover_url" :size="70"></PlayVue>
        </div>
        <div class="icon">
        </div>
      </div>
      <div class="bottom-text">
        <div class="innovate">
          <h3 class="innovate-title">《PPP改革创新之路》</h3>
          <p class="innovate-second-sstitle font">第一部PPP改革类宣传片</p>
          <p class="innovate-tips font-sm">
            财政部政府和社会资本合作（PPP）中心监制
            中视财华国际传媒公司策划、拍摄、制作
          </p>
        </div>
        <div class="person-wrap">
          <h3 class="person-title font-m">项目简介</h3>
          <div class="person-text font-sm">
            <p>
              2017年11月6日，由财政部政府和社会资本合作（PPP）中心监制，
              中视财华国际传媒公司策划、拍摄、
              制作的第一部PPP改革类宣传片《PPP改革创新之路》正式上线，
              这是财政部PPP中心自2014年成立以来拍摄的第一部大型宣传片，力求全面展现PPP改革成果。
            </p>
            <p>
              本宣传片的制作采用实景案例拍摄，分为前期拍摄和后期配音剪辑，拍摄横跨6个省份，
              多地取景，并得到各省财政厅和政府部门的大力支持，从各个方面对拍摄任务进行助力，
              给拍摄工作带来极大便利；后期的解说词、配音和剪辑制作等经历多次的修改打磨，
              最终制作成果得到了中心领导的一致好评，并发表在财政部PPP中心官网。
            </p>
            <p>
              为制作出一部品貌兼优的PPP改革宣传片，财政部PPP中心择选了众多制作单位进行竞标，
              中视财华凭借自己出众的业务能力和扎实的制作水平赢得了财政部ppp中心领导的一致认可，
              得以为P PP改革成果的展现贡献力量。
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import colorTitle from "./colorTitle.vue";
import PlayVue from "./play.vue";

import { reactive } from "vue";

const state = reactive({
  list: [],
  info: {
    content_url: "https://cctvch.oss-cn-beijing.aliyuncs.com/uploads/video/pinpaiwenhua/PPP%E6%94%B9%E9%9D%A9%E5%88%9B%E6%96%B0%E4%B9%8B%E8%B7%AF---%E7%BA%B8%E9%97%B4%E4%BC%A0%E5%AA%92_1.mp4",
    cover_url: "https://img.cctvch.cn/uploads/195c372acb58376846144d8c74273ad3.png"
  },
});


</script>

<style scoped>
.fixed-width {
  margin: 0 auto;
  width: 1440px;
}

.top {
  margin: 46px auto 58px;
  min-width:1440px;
  background:url("https://img.cctvch.cn/uploads/27809e6d21fc7458d581d73a2295ec68.png");
  background-size: 100% 100%;

}
.top-item {
  width: 36%;
}
.top-person-title {
  margin-bottom: 20px;
}
.top-person {
  line-height: 26px;
}
.bottom-img-wrap {
  position:relative;
  width: 860px;
  height: 488px;
  cursor: pointer;
  box-shadow: 0px 9px 22px 2px rgba(96, 102, 118, 0.35);
  overflow: hidden;
}
.bottom-img{
  width: 860px;
  height: 488px;
}
.bottom-img img{
  display:block;
  width:100%;
  height:100%;
}
.icon {
  position: absolute;
  top: -30%;
  left: 50%;
  transition: all 0.6s ease;
  transform: translate(-50%, -50%);
}
.bottom-img-wrap:hover .icon{
  top: 50%;
}
.bottom-text {
  width:500px;
}
.innovate {
  margin-bottom: 30px;
  width: 310px;
}
.innovate-title {
  color: #2f4784;
  font-size: 30px;
  line-height: 56px;
}
.innovate-second-sstitle {
  margin-top: 10px;
  color: #626675;
}

.innovate-tips {
  margin-top: 27px;
}

.person-wrap {
  border-top: 1px solid #9195a3;
}
.person-title {
  margin: 20px 0px;
  background: linear-gradient(0deg, #252086 0%, #e60012 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.person-text {
  color: #626675;
  line-height: 22px;
}
.person-text p {
  margin-bottom: 10px;
}
</style>
